<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant'
import { updatePassword } from '@/api/home'
const router = useRouter()

const oldPass = ref('')
const newPass = ref('')
const confirmPass = ref('')
const active = ref(0)

const goBack = () => {
	router.replace({
		path: '/home',
		query: {
			id: '1',
		},
	})
}

const changeInput = (index) => {
	active.value = index
}

const confirmUpdate = async () => {
	const reg = /^[\u4e00-\u9fa5A-Za-z0-9_]+$/
	if (!reg.test(newPass.value) || newPass.value.length > 20 || newPass.value.length < 8) {
		showNotify({
			type: 'danger',
			message: '密码应该为8-20位字母、数字组合',
			duration: 1000,
		})
	} else {
		if (newPass.value !== confirmPass.value) {
			showNotify({
				type: 'danger',
				message: '两次密码不相同',
				duration: 1000,
			})
		} else {
			let param = {
				oldPass: oldPass.value,
				newPass: newPass.value,
			}
			const res = await updatePassword(param)
			if (+res.code !== 500) {
				// 跳到成功页面
				await router.push({
					path: '/success',
				})
			} else {
				showNotify({
					type: 'danger',
					message: res.message,
					duration: 1000,
				})
			}
		}
	}
}
</script>

<template>
	<div class="pages">
		<van-nav-bar class="title" title="修改密码" left-text="返回" left-arrow @click-left="goBack" />
		<div class="content">
			<van-cell-group inset style="padding-top: 40px">
				旧密码<van-field
					:class="active === 1 ? 'active' : ''"
					class="field"
					@focus="changeInput(1)"
					v-model="oldPass"
					placeholder="旧密码"
				/>
				新密码<van-field
					:class="active === 2 ? 'active' : ''"
					class="field"
					@focus="changeInput(2)"
					v-model="newPass"
					type="password"
					placeholder="新密码8-20位（不能全是数字或字母）"
				/>
				确认新密码<van-field
					:class="active === 3 ? 'active' : ''"
					class="field"
					type="password"
					@focus="changeInput(3)"
					v-model="confirmPass"
					placeholder="确认新密码8-20位（不能全是数字或字母）"
				/>
			</van-cell-group>
			<van-button class="v-button" @click="confirmUpdate" type="primary" size="large"
				>保存新密码</van-button
			>
		</div>
	</div>
</template>

<style scoped lang="scss">
.pages {
	padding-bottom: 34px;
	box-sizing: border-box;

	&.title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', serif;
		font-weight: 400;
		letter-spacing: 1px;
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;

		.v-button {
			box-shadow: 0 2px 4px 0 rgba(93, 156, 250, 0.4);
			background-image: linear-gradient(90deg, rgba(77, 189, 255, 1) 0, rgba(52, 131, 255, 1) 100%);
			border-radius: 50px;
			height: 100px;
			width: 90%;
			margin: 30px 30px;
		}

		.field {
			font-size: 30px;
			line-height: 55px;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 4px;
			border: 1px solid rgb(125, 126, 126);
			height: 100px;
			width: 100%;
			margin: 30px 0;
		}

		.active {
			box-shadow: inset 0 1px 5px 0 rgba(33, 151, 231, 0.52);
			border: 1px solid rgba(33, 151, 231, 1);
		}
	}
}
</style>
